<!DOCTYPE html> 
<html> 
	<head>
		<!-- required -->
		<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1">
		
		<!-- very simple, unstructured, all done handler -->
		<script type="text/javascript">
			// called when framework is completely loaded and navigaton to a page should happen now. 
			// Note, this is a fall-back method and is called only when framework's default navigation
			// engine is not in use and in that case either application plugin is not in use or does
			// not take care of this by having $f.app.onNavigationASync() function.
			// params:
			//	callback (function): function to call after navigation is done
			// returns (void):			
			function onNavigationASync(callback) {
				// NOTE: 
				// If you follow the framework approach of application development
				// you don't need to write any code here.
				//
				// This is just to show case that it is possible - just in case.
				//	
				
				// do whatever you want here to show required UI, manipulate DOM or whatever
				// e.g., here I am making "body" div visible
				$("#body").show();
				
				// NOTE: In case of 'kernel' and 'core' packages of framework navigation engine
				// is not baked in and therefore this call is executed - but in other packages
				// where navigation engine is baked in, this code does not execute - but you
				// still see that body is set to visible, this is because at the time when
				// "#body" element is moved to its right place in startup structure, it is 
				// automatically set to be visible (though can be controlled by setting configuration
				// option fluidOptions.isSupressAutoBodyVisible to true.
				
				// once you are done with your logic of showing UI, you MUST CALL
				// given callback to complete frameowrk loading and firing post
				// navigation events
				// IMPORTANT: If this is not done, framework will not be loaded
				// completely and state of application will be unstable
				if (isFunction(callback)) {
					callback();
				};
			};
			
			// called when framework is completely loaded and navigaton to required page is completed. 
			// Note, this is a fall-back method and is called only when either application plugin is not 
			// in use or does not take care of this by having $f.app.onReadyAll() function.
			// returns (void):
			function onReadyAll() {
				// NOTE: 
				// If you follow the framework approach of application development
				// you don't need to write any code here.
				//
				// This is just to show case that it is possible - just in case.
				//
				$("#message").append("<h1>Hello World!</h1> <p> You are using " + $f.info.title + ", Version " + $f.info.version.version + " (" + $f.info.version.name + ") in '" + $f.info.version.package.type + "' package.");
			};
			
			// on application error
			// this is called if framework catches any unhandled error 
			// and a custom application plugin is not handling it
			// params: 
			//	message (string): error message
			//	url (string): url of the document in which error is
			//	lineNumber (number): line number of the document where error is
			// returns (boolean):		
			//	true: if no error dialog is required
			//	false: if an error dialog is required
			function onApplicationError(message, url, lineNumber) {
				// handle it here
				alert("This unhandled error is handled by global onApplicationError() function.");
				
				// return
				return false;
			};
			
			// throw an error
			function throwError() {
				throw "This is an error";
				
				// return
				return false;
			};
		</script>
		
		<!-- for DEMO UI use only -->
		<link href="../../res/bootstrap.min.css" rel="stylesheet">
		<link href="../../res/bootstrap-responsive.min.css" rel="stylesheet">
		<link href="../../res/styles.css" rel="stylesheet">
		<!-- -->
		
	</head>
	<body> 
		<!-- required -->
		<applet name="fsa" code="fsa.class" archive="../../fsa.jar" style="position:absolute; left:-1px;" height="1" width="1"></applet> 

		<!-- ideally no user interface will be written in startup html directly
		however, just in case you want to write, put it in a div named "body", this will
		ensure that this UI is moved to a logical place in overall page structure so UI is 
		not distorted drastically -->
		<div id="body" style="display: none;">
		
			<!-- top bar -->
			<div class="navbar">
			  <div class="navbar-inner">
				<div class="container-fluid">
					<a class="brand">Hello, World! - It works!</a>
					<div class="pull-right">
						<a class="navbar-text noline" href="..\..\basic\hello-world" fluid-noIntercept target="_blank" title="Open source folder"><i class="icon-folder-open"></i> Source</a>
						<a class="navbar-text noline" href="http://docs.fluidjs.vikasburman.com/2013/01/hello-world.html" fluid-noIntercept target="_blank" title="Open example page"><i class="icon-file"></i> Docs</a>
					</div>
				</div>
			  </div>
			</div>
			<!-- -->

			<div class="container-fluid">
				<div class="row-fluid">
					
					<!-- side bar -->
					<div class="span3"><div class="well sidebar-nav">
						<!-- sections -->
						<div class="accordion" id="accordion">
						  <!-- showcase -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec1" fluid-noIntercept>
							<i class="icon-comment"></i> Showcase
						  </a></div><div id="sec1" class="accordion-body collapse in"><div class="accordion-inner">
							<p><i class="icon-cog"></i> This shows the most basic execution of the framework. Just by referring the framework JS file, system gears up and facilitate the greeting that is shown here.
						  </div></div></div>
						  <!-- -->
						  
						  <!-- observations -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec2" fluid-noIntercept>
							<i class="icon-eye-open"></i> Observations
						  </a></div><div id="sec2" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> See Hello World! mesage, that is coming from a global <span class="object">onReadyAll()</span> function.
							<p><i class="icon-cog"></i> See how in absence of default navigation engine (in 'core' and 'kernel' packages) navigation can be supported by, <span class="object">onNavigationASync()</span> function.
							<p><i class="icon-cog"></i> See how in absence of a cutom application plugin unhandled errors can be handled by, <span class="object">onApplicationError()</span> function.
						  </div></div></div>
						  <!-- -->
						  <!-- Activities -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec3" fluid-noIntercept>
							<i class="icon-hand-right"></i> Activities
						  </a></div><div id="sec3" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> Have a look at the source of <span class="file">app-hello-world.html</span> file.
							<p><i class="icon-cog"></i> Open developer tools for your browser and explore the object 
							structure of <span class="object">$f</span>, that represents the root object of the framework.
							<p><i class="icon-cog"></i> Click below to throw an exception.
							<a href="#" class="btn btn-danger" onclick="javascript: return throwError();">Throw an Exception</a>
						  </div></div></div>
						  <!-- -->
						  <!-- Takeaways -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec4" fluid-noIntercept>
							<i class="icon-shopping-cart"></i> Takeaways
						  </a></div><div id="sec4" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> <span class="file">fluid.debug.js</span> is like any standard JavaScript file that needs to be added in html page.
							<p><i class="icon-cog"></i> In absence of a custom application plugin and/or default navigation engine, global functions <span class="object">onReadyAll()</span>,
								<span class="object">onNavigationASync()</span> and 
								<span class="object">onApplicationError()</span> are key places.
							<p><i class="icon-cog"></i> All ui elements in <span class="file">{startup}.html</span> should be kept inside a div with <span class="object">body</span> id.
						  </div></div></div>
						  <!-- -->
						  <!-- References -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec5" fluid-noIntercept>
							<i class="icon-bookmark"></i> References
						  </a></div><div id="sec5" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> <a href="http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers" fluid-noIntercept target="_blank">Opening Developer Tools</a>
						  </div></div></div>
						  <!-- -->
						</div>
						<!-- -->
					</div></div>
					<!-- -->
					
					<!-- right half where the action is -->
					<div class="span9"><div class="row-fluid">
						
						<!-- tabs -->
						<ul class="nav nav-tabs">
							<li id="t1" class="active"><a href="#" onclick="javascript: return showTab('t1', 'message');">Hello, World!</a></li>
						</ul>
						<!-- -->
						
						<!-- hello world -->
						<div id="message">
						</div>
						<!-- -->
						
					</div></div>
					<!-- -->
					
				</div>	
			</div>
		
		</div>
		
		<!-- refer framework JS (as last item in body) -->
		<script type="text/javascript" src="../../fluid.debug.js"></script> 	
		
		<!-- for DEMO UI use only -->
		<script src="../../res/bootstrap.min.js"></script>
		<script src="../../res/general.js"></script>
		<!-- -->
	</body> 
</html> 
